<template>
  <div class="social-livelihood-page">
    <div class="social-livelihood-content">
      <!-- UE固定尺寸容器 -->
      <div ref="ueContainer" class="ue-container">
        <iframe 
          :src="ueConfig.streamUrl" 
          class="ue-iframe"
          :style="{ 
            transform: `scale(${scale})`,
            transformOrigin: 'center center'
          }"
          frameborder="0"
          allowfullscreen
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";

// UE配置参数
const ueConfig = ref({
  // UE服务地址
  streamUrl: 'http://127.0.0.1:11195/video.html'
});

// 缩放相关
const ueContainer = ref(null);
const scale = ref(1);

// 动态计算缩放比例
const updateScale = () => {
  nextTick(() => {
    if (ueContainer.value) {
      const containerWidth = ueContainer.value.clientWidth;
      const containerHeight = ueContainer.value.clientHeight;
      const scaleX = containerWidth / 1920;
      const scaleY = containerHeight / 1080;
      // 使用较小的缩放比例，然后稍微增加来覆盖黑边
      const baseScale = Math.min(scaleX, scaleY);
      scale.value = baseScale * 1.02; // 增加2%来覆盖黑边
      console.log('容器尺寸:', containerWidth, 'x', containerHeight);
      console.log('缩放比例:', scale.value);
    }
  });
};

onMounted(() => {
  console.log('社会民生页面已加载，UE数据流iframe已就绪');
  console.log('UE配置:', ueConfig.value);
  
  updateScale();
  window.addEventListener('resize', updateScale);
});

onUnmounted(() => {
  console.log('社会民生页面已卸载');
  window.removeEventListener('resize', updateScale);
});
</script>

<style scoped>
/* 重置所有可能的margin和padding */
.social-livelihood-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.social-livelihood-page {
  width: 100%;
  height: 100%;
  background: #e3f2fd;
  color: #333;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

.social-livelihood-content {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ue-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

.ue-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(1920px * 1.01);
  height: calc(1080px * 1.01 );
  border: none;
  margin: 0;
  padding: 0;
  /* 中心定位，配合center center缩放 */
  transform-origin: center center;
  /* 基础居中定位 */
  margin-top: -540px;  /* -height/2 */
  margin-left: -960px; /* -width/2 */
}

/* 响应式设计 */
.ue-container {
  /* 确保容器不会超出父容器 */
  box-sizing: border-box;
}

/* 在小屏幕上保持16:9比例 */
@media (max-width: 1920px) or (max-height: 1080px) {
  .ue-container {
    aspect-ratio: 16/9;
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
}
</style>